<template>
	<view class="page">
		<view class="flex0">
			<u-navbar :fixed='false' bgColor="transparent" @leftClick="noHandler"  title="学生心理健康服务平台">
				<view slot="left"></view>
				<view slot="center" class="navTitle">
					学生心理健康服务平台 
				</view>
			</u-navbar>
			<view class="step pd30">
				<view class="i cur">
					<view class="ico">
						<view class="l"></view>
						<view class="t">
							01
						</view>
						<view class="l"></view>
					</view>
					<view class="p">
						选择身份
					</view>
				</view>
				<view class="i">
					<view class="ico">
						<view class="l"></view>
						<view class="t">
							02
						</view>
						<view class="l"></view>
					</view>
					<view class="p">
						登录认证
					</view>
				</view>
			</view>
		</view>
		
		<view class="flex1">
			<view class="selectUser">
				<view class="tit">
					请选择您的身份
				</view>
				
				<view class="scrollBox">
					<scroll-view scroll-y="true" class="scrollView">
						<view class="userTypes">
							<navigator v-for="(item,index) in typeList" :key="index" :url="item.url" open-type="navigate" class="item">
								<view class="img">
									<image :src="item.picUrl" mode="widthFix"></image>
								</view>
								<view class="itxt">
									<view class="it">{{item.title}}</view>
									<view class="ip">{{item.memo}}</view>
								</view>
							</navigator>
						</view>
						<view class="footTip">
							<view class="tourist">
								<navigator url="/pages/home/home" open-type="navigate" class="lineNav">游客浏览模式</navigator>
							</view>
							<view class="utip">
								<text>如遇登录问题请点击</text>
								<button type="default" open-type="contact" class="lineNav">联系客服</button>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeList:[]
			}
		},
		onLoad() {
		
			this.$api.adList({
				position: 7
			}, res => {
				if (res.code == 200) {
					this.typeList = res.data;
				}
			})	
		},
		methods: {}
	}
</script>

<style lang="scss" scoped>
	.selectUser{
		padding: 44rpx 0 60rpx;
		box-sizing: border-box;
		height: 100%;
		display: flex;
		flex-direction: column;
		background: #fff;
		border-radius: 60rpx 60rpx 0 0;
		.tit{
			flex: 0 0 auto;
			width: 100%;
			margin-bottom: 44rpx;
			text-align: center;
			font-size: 36rpx;
			line-height: 1;
			color: #65554d;
		}
		.scrollBox{
			flex: 1 1 auto;
			overflow: hidden;
			width: 100%;
		}
		.lineNav{
			display: inline;
			padding: 0 !important;
			margin: 0 !important;
			text-decoration: underline !important;
			border: none !important;
			opacity: 1 !important;
			outline: none !important;
			color: #fe9c29 !important;
			background: transparent !important;
			line-height: inherit;
			overflow: visible;
			height: auto !important;
			&:before,&:after{
				display: none !important;
			}
		}
	}
	.userTypes{
		padding: 0 60rpx;
		display: flex;
		align-items: stretch;
		justify-content: space-between;
		flex-wrap: wrap;
		.item{
			flex: 0 0 auto;
			width: 49%;
			margin-bottom: 2%;
			display: flex;
			align-items: center;
			flex-direction: column;
			padding: 60rpx 30rpx;
			box-sizing: border-box;
			background: linear-gradient(90deg,#f3f8fd,#e2eefa);
			border-radius: 30rpx;
			position: relative;
			&:nth-child(2){
				background: linear-gradient(90deg,#fdf9f7,#f9eee7);
			}
			&:nth-child(3){
				background: linear-gradient(90deg,#fefaf0,#f9f3d5);
				
			}
			&:nth-child(4){
				background: linear-gradient(90deg,#f2f9f8,#ddf1ed);
			}
			
			.img{
				flex: 0 0 auto;
				width: 160rpx;
				margin:0 auto 50rpx;
				display: flex;
				justify-content: center;
				align-items: flex-end;
				height: 200rpx;
				image{
					width: 100%;
					height: auto;
				}
			}
			.itxt{
				flex: 1 1 auto;
				overflow: hidden;
				.it{
					font-size: 32rpx;
					color: #65554d;
					line-height: 1.5;
				}
				.ip{
					font-size: 24rpx;
					color: #897f7a;
				}
			}
			&.selected{
				.ck{
					background: #fe9c29;
					image{
						opacity: 1;
					}
				}
			}
		}
	}
</style>
